<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../js/axios.min.js"></script>
    <style>
      #update {
        display: none;
      }
    </style>
  </head>

  <body>
    <h1>网易云商城管理系统</h1>
    <div id="send">
      <input type="text" />
      <input type="text" />
      <input type="text" />
      <input type="text" />
      <input type="button" value="发布" />
    </div>

    <div id="update">
      <input type="text" />
      <input type="text" />
      <input type="text" />
      <input type="text" />
      <input type="button" value="保存" />
    </div>
    <ul id="plist">
      <!-- <li>
        <h2></h2>
        <p></p>
        <p></p>
        <img src="" alt="">
      </li> -->
    </ul>
    <script>
      /* 
        1-uid 在登录的时候返回的--- 存入本地--首页获取
        2-四个输入框一个按钮
        3-点击发布按钮的时候获取输入框的值 
        4-调用发布商品接口
            发布成功以后 5-调用商品列表接口 (函数)
        */
      //1-获取用户id
      let id = localStorage.getItem("id");
      // 2-3
      var ipts = document.querySelectorAll("#send input");
      // 3-点击发布按钮的时候获取输入框的值
      ipts[4].onclick = function () {
        /* 
           接口地址：  http://jx.xuzhixiang.top/ap/api/goods/goods-add.php
         接口请求方式：get
         接口参数：
    pimg 2.
    pname 3.
    pprice 4.
    pdesc 5.
    uid （可选）用户商品
        */
        // 接口需要的参数
        var pname = ipts[0].value;
        var pprice = ipts[1].value;
        var pdesc = ipts[2].value;
        var pimg = ipts[3].value;

        // 4-调用发布商品接口
        let url = "http://jx.xuzhixiang.top/ap/api/goods/goods-add.php";
        let promise = axios.get(url, {
          params: {
            pname: pname,
            pprice,
            pdesc,
            pimg,
            uid: id,
          },
        });
        console.log("axios get请求成功以后执行 then");
        promise.then(function (res) {
          // axios - 成功的请求传递过来的数据
          console.log(res);
          // res.data 服务器返回的数据
          console.log(res.data);
          //5-调用商品列表接口 (函数)
          loadProductList();
        });
      };

      loadProductList();
      // 5-调用商品列表接口 (函数)
      /* 
      
      1- 接口的参数  uid 本地-- pagenum pagesiz2 
      2- 地址   接口文档
      3-发起请求-获取数据--》分析数据 -->商品数据-> 页面结构-li


      */

      // 商品数据 定义全局变量
      var productArr;

      function loadProductList() {
        // 接口需要参数
        var uid = id;
        var pagenum = 0;
        var pagesize = 20;
        // 地址
        var url = "http://jx.xuzhixiang.top/ap/api/allproductlist.php";
        // 发起请求
        let p = axios.get(url, { params: { uid, pagenum, pagesize } });
        p.then((r) => {
          //服务器返回的数据
          console.log(r.data);
          // 分析
          //  商品数组
          productArr = r.data.data;
          console.log(productArr);

          // 页面结构
          var str = "";
          productArr.forEach((pObj) => {
            str += ` 
              <li>
                <h2>${pObj.pname}</h2>
                <p>${pObj.pprice}</p>
                <p>${pObj.pdesc}</p>
                <img src="${pObj.pimg}" alt="">

                
                <button onclick="delBtnClick(${pObj.pid},this)">删除</button>
                <button onclick="updateBtnClick(${pObj.pid},this)">修改</button>

              </li>
            `;
          });
          document.querySelector("#plist").innerHTML = str;
        });
      }

      /* 
      删除---
       onclick=“this” 里面的this 就是按钮的按钮
       <button onclick="delBtnClick(${pObj.pid},this)">删除</button>
      */

      function delBtnClick(pid, btn) {
        console.log("删除");
        // 点击的删除按钮对应的商品的pid
        console.log(pid);
        var uid = id;
        // 获取token
        var token = localStorage.getItem("token");

        let url = "http://jx.xuzhixiang.top/ap/api/goods/goods-delete.php";

        axios
          .get(url, {
            params: {
              uid,
              pid,
              token,
            },
          })
          .then((r) => {
            console.log(r.data);
            // 删除成功
            // 1- 刷新页面
            // location.reload()

            // 2- 刷新列表
            // loadProductList()

            // 3- 删除一行的dom -- li
            // -点击的时候获取，点击的按钮- 删除按钮的父元素
            console.log(this); //Window
            console.log(btn);
            // 删除了 点击按钮的父元素
            btn.parentNode.remove();
          });
      }

      // 修改
      /* 
      
       1- 修改的结构-- div -四个输入框 -一个保存按钮
       2-增加修改按钮-点击事件 -点击的时候 修改div显示
        要修改的信息 出现到输入框中
        g根据商品的id  --》pid 去productArr 找到商品对象--》输入框
       3-保存按钮添加点击事件 
       4-获取输入框的值-发起 修改请求
       5-修改成功以后 刷新列表
      */
      function updateBtnClick(pid, btn) {
        console.log(pid, btn);
        let updateDiv = document.querySelector("#update");
        updateDiv.style.display = "block";

        // 商品的id  --》pid
        // 根据pid 获取 商品的信息呢
        // 找到 数组中元素 跟 pid 一样的 元素

        // 根据return 的条件找   数组中元素的id  跟变量pid 相等的元素
        let pObj = productArr.find(function (v) {
          return pid == v.pid;
        });
        console.log(pObj);
        // 找到商品对象--》输入框
        let ipts = document.querySelectorAll("#update input");
        ipts[0].value = pObj.pname;
        ipts[1].value = pObj.pprice;
        ipts[2].value = pObj.pdesc;
        ipts[3].value = pObj.pimg;

        //3-保存按钮添加点击事件
        ipts[4].onclick = function () {
          // 4-获取修改输入框的值
          let pname = ipts[0].value;
          let pprice = ipts[1].value;
          let pdesc = ipts[2].value;
          let pimg = ipts[3].value;
          // 5-请求
          let url = "http://jx.xuzhixiang.top/ap/api/goods/goods-update.php";
          axios
            .get(url, {
              params: {
                pname,
                pprice,
                pdesc,
                pimg,
                pid,
              },
            })
            .then((r) => {
              console.log(r.data);
              alert(r.data.msg);
              // 刷新列表
              loadProductList();
            });
        };
      }
    </script>
  </body>
</html>
